<template>
  <div id="app">
    <el-header class="home_box_header" v-show="show">
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo home_header"
          mode="horizontal"
          @select="handleSelect"
          background-color="#fff"
          text-color="black"
          active-text-color="#ffd04b"
      >
        <el-image
            style="height: 60px;
                 margin: 0 !important;
                 display: inline-block;
                  float: left"
            :src="logo"
            fit="scale-down"></el-image>
        <el-submenu index="4" class="header_right">
          <template slot="title">我的</template>
          <el-menu-item index="/accountManagement" >账号管理</el-menu-item>
          <el-menu-item index="/login">退出登陆</el-menu-item>
        </el-submenu>
        <el-submenu index="5" class="header_right">
          <template slot="title">赛事咨讯</template>
          <el-menu-item index="/information/competitionList" >赛事列表</el-menu-item>
          <el-menu-item index="/information/EventDynamics">赛事动态</el-menu-item>
          <el-menu-item index="/information/announcement">通知公告</el-menu-item>
        </el-submenu>
        <el-menu-item index="/backIndex/teams" class="header_right">参赛管理</el-menu-item>
        <el-menu-item index="/information/" class="header_right">报名参赛</el-menu-item>
        <el-menu-item index="/home" class="header_right">首页</el-menu-item>
      </el-menu>
    </el-header>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'app',
  data() {
    return {
      activeIndex: '/home',
      logo: require('@/imgs/gx_games.png'),
      show: true
    };
  },
  methods: {
    handleSelect(key) {
      if(key!==this.$route.path) {
        if (key==='/login'){
          window.sessionStorage.clear();
          this.$router.push('/login');
        } else if(key === '/information/'){
          this.$router.push(key+'competitionList')
        } else if(key === '/backIndex/teams'){
          if(window.sessionStorage.getItem('level')==='1') this.$router.push(key);
          else this.$router.push('/backIndex/managementTeam')
        }
        //  competitionList
        else {
          this.$router.push(key)
        }
      }
    }
  },
  mounted() {
    const str = '/backIndex';
    this.show = (this.$route.path.indexOf(str) === -1);
    this.activeIndex = this.$route.path;
  },
//  路由监听
  watch: {
    $route: {
      handler:function(val) {
        const str = '/backIndex';
        this.show = (val.path.indexOf(str) === -1);
        this.activeIndex = val.path;
      }
    }
  }
}
</script>

<style lang="less">
html,
body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
  .home_box_header{
    padding: 0;
    margin: 0 auto;
    background-color: #ffffff;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 10;

    .home_header{
      display: block;
      min-width: 735px;
      max-width: 1750px;
      margin: 0 auto;
      .header_right {
        float: right !important;
      }
    }
  }
}
</style>
